<template>
  <div class="verTable">
    <!--
      <table>
        <tr v-for="(item, i) in tableData" :key="item.index">
          <td class="column">{{item.label}}</td>
          <td>
            <el-select v-model="vallist[i]" @change="handleChange($event)">
              <el-option v-for="val in tableData" :key="val.value" :label="val.label" :value="val.value"></el-option>
            </el-select>
          </td>
        </tr>
      </table>

      :disabled="getDisable(item.value)"
    -->
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <label for="">{{ item.name }}:</label>
        <el-select
          v-model="item.value"
          @change="selectChange(item.value, index)"
          placeholder="请选择"
        >
          <el-option
            v-for="(item1, optionIndex) in options"
            :key="optionIndex"
            :label="item1.label"
            :value="item1.value"
          ></el-option>
        </el-select>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "verTable",
  data() {
    return {
      // tableData: [{
      //   value: 1,
      //   label: '用户1'
      // }, {
      //   value: 2,
      //   label: '用户2'
      // }, {
      //   value: 3,
      //   label: '用户3'
      // }, {
      //   value: 4,
      //   label: '用户4'
      // }, {
      //   value: 5,
      //   label: '用户5'
      // }, {
      //   value: 6,
      //   label: '用户6'
      // }],
      // vallist: [],
      list: [
        { name: "用户1", value: "用户1" },
        { name: "用户2", value: "用户2" },
        { name: "用户3", value: "用户3" },
        { name: "用户4", value: "用户4" },
        { name: "用户5", value: "用户5" },
        { name: "用户6", value: "用户6" },
      ],
      list2: [
        { name: "用户1", value: "用户1" },
        { name: "用户2", value: "用户2" },
        { name: "用户3", value: "用户3" },
        { name: "用户4", value: "用户4" },
        { name: "用户5", value: "用户5" },
        { name: "用户6", value: "用户6" },
      ],
      options: [
        {
          value: 1,
          label: "用户1",
        },
        {
          value: 2,
          label: "用户2",
        },
        {
          value: 3,
          label: "用户3",
        },
        {
          value: 4,
          label: "用户4",
        },
        {
          value: 5,
          label: "用户5",
        },
        {
          value: 6,
          label: "用户6",
        },
      ],
      selectedOptions: [1, 2, 3, 4, 5, 6],
      // selectedOptionsb: [1,2,3,4,5,6]
      lastarr: [11, 22, 33, 44, 55, 66],
    };
  },
  mounted() {
    this.defval();
  },
  methods: {
    selectChange(item, index) {
      this.changeB(this.chageV(this.selectedOptions, item, index), index);
      this.lastarr = [];
      for (var i = 0; i < this.selectedOptions.length; i++) {
        this.lastarr.push(i + 1 + "" + this.selectedOptions[i]);
      }
    },
    defval() {
      for (let item in this.list) {
        // console.log(this.list[item].value)
      }
    },
    chageV(arr, v, i) {
      var vi = this.getArrayIndex(arr, v);
      var iv = arr[i];
      arr[i] = v;
      arr[vi] = iv;
      return vi;
    },
    changeB(v, i) {
      var ii = this.list2[v];
      this.list2[v] = this.list2[i];
      this.list2[i] = ii;
      var nlist = this.list2.slice();
      this.list[i].value = nlist[i].value;
      this.list[v].value = nlist[v].value;
    },
    /*
     * 获取某个元素下标
     * arr: 传入的数组
     * obj: 需要获取下标的元素
     * */
    getArrayIndex(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return -1;
    },
  },
};
</script>

<style lang="scss">
.verTable {
  ul {
    list-style: none;
    li {
      margin-bottom: 0.625rem /* 10/16 */;
    }
  }
}
</style>
